<template>
  <div class="home">
    <div class="box1">
      <div class="container">
        <h1>searchaArticle</h1>
        <div class="esc" @click="toIndex">
          <van-icon name="cross" size="40" color="#ccc" />
          <p style="color: #ccc">esc</p>
        </div>
      </div>
      <div class="searchBox">
        <input
          type="text"
          class="input"
          placeholder="searchArticlePlaceholder"
          ref="input"
          style="
            width: 90%;
            height: 40px;
            border: none;
            outline: none;
            padding-left: 5px;
          "
          @keydown="search"
        />
        <div class="icon2"><van-icon name="search" size="40" /></div>
      </div>
      <div style="padding-left: 40px">
        <p
          style="
            height: 50px;
            line-height: 50px;
            width: 700px;
            padding-left: 10px;
            cursor: pointer;
          "
          v-for="(item, index) in list"
          class="result"
          :key="index"
          @click="goDetail(item.id)"
        >
          {{ item.title }}
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import { getSearch } from "../api/index.js";
export default {
  data() {
    return {
      list: [],
    };
  },
  methods: {
    toIndex() {
      this.$router.back();
    },
    async search(e) {
      if (e.keyCode === 13) {
        let res = await getSearch(this.$refs.input.value);
        this.list = res;
        console.log(res);
      }
    },
    goDetail(id) {
      this.$router.push({
        path: "/detail/" + id,
        query: { 
          type: "article",
        },
      });
    },
  },
};
</script>

<style>
.home {
  width: 100vw;
  height: 100vh;
  background: #fff;
}
.box1 {
  width:80%;
  height: 200px;
  margin-left: 60px;
  padding-top: 15px;
}
.container {
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}
h1 {
  width: 70%;
}
.esc {
  width: 20%;
  text-align: center;
}
.searchBox {
  width:80%;
  margin-left: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
} 
.searchBox > .icon2 {
  width: 10%;
  border-left: 1px solid #ccc;
  text-align: center;
}
.result:hover {
  background: #f3f3f3;
}
</style>
